<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-grid>
					<pure-block
						v-for="i in 8"
						:key="i"
					>
						<view class="content">内容</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 自定义列数 -->
			<pj-demo title="自定义列数">
				<pure-grid cols="3">
					<pure-block
						v-for="i in 9"
						:key="i"
					>
						<view class="content">内容</view>
					</pure-block>
				</pure-grid>
			</pj-demo>

			<!-- 自定义间隔 -->
			<pj-demo title="自定义间隔">
				<pure-grid
					cols="4"
					gap="2px"
				>
					<pure-block
						v-for="i in 8"
						:key="i"
					>
						<view class="content">内容</view>
					</pure-block>
				</pure-grid>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup></script>

<style lang="scss" scoped>
	.page {
		.content {
			width: 100%;
			height: 100%;
			background: var(--pure-background-default);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: var(--pure-font-size-small);
		}
	}
</style>
